let divs = document.querySelectorAll(".cityInfo div")
    $.ajax({
        url: "http://chst.vip:1234/api/getgsproduct",
        data: {
            shopid: 0,
            areaid: 0
        }
    }).then(res => {
        // console.log(res);
        let html = '';
        res.result.forEach(item => {
            html += `
            <li>
                <a href="">
                    <img src="${item.productImg}" alt="">
                    <div class="title">${item.productName}</div>
                    <p class="price">${item.productPrice}</p>
                </a>
            </li>
            `
        })
        ul2.innerHTML = html
    })
    Array.from(divs).forEach(div => {
        div.isClick = false;
        div.onclick = function () {
            let className = this.className
            if (className === "shop") {
                let shopDiv = this;
                this.isClick = !this.isClick;
                $.ajax({
                    url: "http://chst.vip:1234/api/getgsshop",
                }).then(res => {
                    // console.log(res);
                    let html = ""
                    res.result.forEach(item => {
                        // console.log(item);
                        html += `
                        <li shopid=${item.shopId} class="lis">${item.shopName}</li>
                        `
                    })
                    ul1.innerHTML = html
                    let lis = ul1.querySelectorAll("li")
                    // console.log(lis);
                    Array.prototype.slice.call(lis).forEach(li => {
                        li.onclick = function () {
                            ul1.style.display = "none";
                            shopDiv.isClick = false;
                            shopDiv.innerHTML = this.innerText + "▲"
                            let shopid = this.getAttribute('shopId')
                            $.ajax({
                                url: "http://chst.vip:1234/api/getgsproduct",
                                data: {
                                    shopid,
                                    areaid: 0
                                }
                            }).then(res => {
                                // console.log(res);
                                let html = '';
                                res.result.forEach(item => {
                                    html += `
                                    <li>
                                        <a href="">
                                            <img src="${item.productImg}" alt="">
                                            <div class="title">${item.productName}</div>
                                            <p class="price">${item.productPrice}</p>
                                        </a>
                                    </li>
                                    `
                                })
                                ul2.innerHTML = html
                            })
                        }
                    })
                })
                this.innerHTML = this.isClick ? "<span>京东</span> <span>▼</span>" : "<span>京东</span> <span>▲</span>"
                if (this.isClick) {
                    ul1.style.display = "block"
                } else {
                    ul1.style.display = "none"
                }
            }
            let lis2 = document.getElementsByClassName('lis')
            console.log(lis2);
            //当点击地区选项的时候
            if (this.className === 'place') {
                let areaDiv = this;
                this.isClick = !this.isClick;
                $.ajax({
                    url: "http://chst.vip:1234/api/getgsshoparea",
                }).then(res => {
                    // console.log(res);
                    let html = ""
                    res.result.forEach(item => {
                        // console.log(item);
                        html += `
                        <li areaid=${item.areaId} class="lis">${item.areaName}</li>
                        `
                    })
                    ul1.innerHTML = html
                    let lis = ul1.querySelectorAll("li")
                    Array.prototype.slice.call(lis).forEach(li => {
                        li.onclick = function () {
                            ul1.style.display = "none";
                            areaDiv.isClick = false;
                            areaDiv.innerHTML = this.innerText.substring(0,2) + "▲"
                            let areaid = this.getAttribute('areaId')
                            $.ajax({
                                url: "http://chst.vip:1234/api/getgsproduct",
                                data: {
                                    shopid:0,
                                    areaid
                                }
                            }).then(res => {
                                // console.log(res);
                                let html = '';
                                res.result.forEach(item => {
                                    html += `
                                    <li>
                                        <a href="">
                                            <img src="${item.productImg}" alt="">
                                            <div class="title">${item.productName}</div>
                                            <p class="price">${item.productPrice}</p>
                                        </a>
                                    </li>
                                    `
                                })
                                ul2.innerHTML = html
                            })
                        }
                    })
                })
                this.innerHTML = this.isClick ? "<span>华北</span> <span>▼</span>" : "<span>华北</span> <span>▲</span>"
                if (this.isClick) {
                    ul1.style.display = "block"
                } else {
                    ul1.style.display = "none"
                }
            }
        }
    })